import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'

/** 侧边栏项目 */
export interface SidebarItem {
  // 项目ID
  id: number
  // 图标图片URL
  iconUrl: string
  // 背景颜色
  backgroundColor: string
  // 弹框标题
  title: string
  // 弹框内容
  content: string
  // 是否启用
  enabled: boolean
}

/** 侧边栏组件属性 */
export interface SidebarProperty {
  // 侧边栏位置
  position: 'left' | 'right'
  // 距离顶部距离
  top: number
  // 侧边栏项目列表
  items: SidebarItem[]
  // 组件样式
  style: ComponentStyle & {
    // 侧边栏背景色
    sidebarBgColor?: string
    // 侧边栏圆角
    sidebarBorderRadius?: number
    // 阴影
    shadow?: boolean
  }
}

// 定义组件
export const component = {
  id: 'Sidebar',
  name: '侧边栏',
  icon: 'ep:menu',
  position: 'fixed',
  property: {
    position: 'right',
    top: 200,
    items: [
      {}
    ],
    style: {
      bgType: 'color',
      bgColor: 'transparent',
      margin: 0,
      marginTop: 0,
      marginBottom: 0,
      marginLeft: 0,
      marginRight: 0,
      padding: 0,
      paddingTop: 0,
      paddingBottom: 0,
      paddingLeft: 0,
      paddingRight: 0,
      borderRadius: 0,
      borderTopLeftRadius: 0,
      borderTopRightRadius: 0,
      borderBottomRightRadius: 0,
      borderBottomLeftRadius: 0,
      sidebarBgColor: '#ffffff',
      sidebarBorderRadius: 8,
      shadow: true
    }
  }
} as DiyComponent<SidebarProperty>
